<template>
  <div class="row col">
    <div class="col">
      <!-- <q-scroll-area class="fit"> -->
      <div class="bg-grey-2 q-mx-sm q-my-md column" style="">
        <q-input outlined type="textarea" placeholder="快和大家一起分享你的问题吧！" v-model="topicForm.forumText"></q-input>
        <div v-if="topicForm.topic.label != null">
          <q-chip removable dense icon="bookmark" @remove="removeTopic">{{ topicForm.topic.label }}</q-chip>
        </div>
        <!-- 话发布题底部按钮 -->
        <div ref="topicListDiv" style="display: flex; flex-direction: column">
          <q-list class="label-list">
            <q-item clickable @click="uploadFile">
              <q-item-section style="display: flex; flex-direction: row"><q-icon name="mdi-file-cloud-outline" size="xs" style="text-align: center"></q-icon>图片</q-item-section>
            </q-item>
            <q-item clickable v-if="this.parentId == null">
              <q-item-section style="display: flex; flex-direction: row"><q-icon name="mdi-chat-processing-outline" size="xs" style="text-align: center" @click="showTopicLists"></q-icon>话题</q-item-section>
            </q-item>
            <q-item>
              <q-item-section style="display: flex; flex-direction: row"> <q-toggle style="margin-top: -15px" dense size="xs" v-model="topicForm.unnamedFlag" color="primary" keep-color label="匿名" /></q-item-section>
            </q-item>

            <!-- 话题提交按钮 -->
            <q-item style="margin-left: auto">
              <q-item-section>
                <q-btn style="width: 100px; text-align: justify" :ripple="{ center: true }" color="blue" label="发 布 话 题" no-caps @click="saveForum" />
              </q-item-section>
            </q-item>
          </q-list>
        </div>
        <!-- 查看图片列表 -->
        <div ref="imageContainer">
          <viewer class="label-list q-mb-sm" style="max-height: 100px" ref="viewer" :options="options" :images="topicForm.viedoUrls" v-if="topicForm.viedoUrls.length > 0" @inited="inited">
            <img v-for="(src, index) in topicForm.viedoUrls" :key="index" :src="src" style="object-fit: contain; max-height: 100%; max-width: 150px" />
          </viewer>
        </div>
      </div>
      <!-- 发布话题的话题选择 -->
      <div class="bg-white shadow-5" style="z-index: 100; border: solid 1px white; width: fit-content; position: absolute; left: 330px; top: 180px" v-show="showTopicList">
        <q-list class="" dense style="width: fit-content">
          <q-item clickable v-for="item in treeNodes" :key="item.value" style="padding: 0px">
            <q-item-section style="display: flex; flex-direction: row; justify-content: flex-start">
              <div class="q-px-xs">
                <q-radio size="xs" style="font-size: 12px" dense left-label :label="item.label" @input="showTopicList = false" v-model="topicForm.topic" :val="item" />
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
      <!-- 上传文件的弹窗 -->
      <q-dialog maximized flat persistent ref="dialog">
        <div class="" style="display: flex; justify-content: center; align-items: center; flex-direction: column">
          <q-uploader url="http://127.0.0.1:9008/weather-api/upload" auto-upload field-name="uploadFile" @uploaded="uploadResult" :headers="headers" label="Batch upload" multiple batch style="max-width: 300px" />
          <div class="row justify-center q-pa-md">
            <q-btn outline color="white" icon="mdi-close-thick" label="关闭" v-close-popup />
          </div>
        </div>
      </q-dialog>
      <!-- </q-scroll-area> -->
    </div>
  </div>
</template>

<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import { debounce } from 'lodash';
import { array } from 'src/boot/math';

export default {
  name: 'TopicCreate',
  components: {},
  props: {
    treeNodes: {
      type: Array,
      default: () => [],
    },
    parentId: {
      type: String,
      default: () => null,
    },
    discussion: {
      type: String,
      default: () => null,
    },
  },
  data() {
    return {
      options: {
        title: false,
      },
      topicForm: {
        parentId: '',
        discussion: '',
        topic: {},
        unnamedFlag: false,
        forumText: '',
        viedoUrls: [],
        avatar: '',
      },
      emptyTopicForm: {
        parentId: '',
        discussion: '',
        topic: {},
        unnamedFlag: false,
        forumText: '',
        viedoUrls: [],
        avatar: '',
      },

      index: 0, // 当前图片的索引
      showQuery: false,
      showTopicList: false,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      viewer: null,
      url: {
        add: '/forum/add',
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    reset() {
      this.topicForm = JSON.parse(JSON.stringify(this.emptyTopicForm));
    },
    saveForum() {
      this.$axios
        .post(this.url.add, this.topicForm)
        .then((res) => {
          this.reset();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    showTopicLists() {
      this.showTopicList = true;
    },
    removeTopic() {
      this.topicForm.topic = {};
    },
    // 初始化预览组件
    inited(viewer) {
      this.$viewer = viewer;
    },
    onPreview: debounce(function (imgIndex) {
      // 显示预览组件
      this.$viewer.show();
      // 从当前图片开始预览
      this.$viewer.view(imgIndex);
    }, 300),
    uploadResult(info) {
      const fileResult = JSON.parse(info.xhr.response);
      this.topicForm.viedoUrls.push(`http://127.0.0.1:9000${fileResult.url}`);
      this.$refs.dialog.hide();
    },
    uploadFile() {
      this.$refs.dialog.show();
    },
    handleClickOutside(event) {
      const { target } = event;
      const { topicListDiv } = this.$refs;
      if (topicListDiv && !topicListDiv.contains(target)) {
        this.showTopicList = false;
      }
    },
  },
  created() { },
  mounted() {
    this.topicForm.avatar = this.$store.state.User.info.avatar;
    this.emptyTopicForm.avatar = this.$store.state.User.info.avatar;
    this.topicForm.parentId = this.parentId;
    this.emptyTopicForm.parentId = this.parentId;
    this.topicForm.discussion = this.discussion;
    this.emptyTopicForm.discussion = this.discussion;
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
};
</script>
<style lang="stylus"
       scope>
.label-list {
  display: flex;
  justify-content: flex-start;
}
</style>
